<template>
  <div class="login-page">
    <div class="login-left">
      <div class="brand-logo">
        <img src="https://cdn-icons-png.flaticon.com/512/1046/1046857.png" alt="logo" />
        <span>酒店预订</span>
      </div>
      <div class="welcome-title">欢迎来到酒店预订平台</div>
      <div class="welcome-desc">
        体验高端酒店预订服务，享受专属优惠与个性化推荐。加入我们，开启您的尊贵旅程。
      </div>
      <ul class="features">
        <li>
          <i class="el-icon-discount"></i>
          <div>
            <span class="feature-title">专属优惠</span>
            <span class="feature-desc">会员享受专属价格与促销活动</span>
          </div>
        </li>
        <li>
          <i class="el-icon-lock"></i>
          <div>
            <span class="feature-title">安全预订</span>
            <span class="feature-desc">数据加密，保障您的信息安全</span>
          </div>
        </li>
        <li>
          <i class="el-icon-service"></i>
          <div>
            <span class="feature-title">24小时客服</span>
            <span class="feature-desc">我们的团队随时为您服务</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="login-right">
      <el-card class="login-card">
        <el-tabs v-model="activeTab" stretch>
          <el-tab-pane label="" name="login" >
            <div class="login-title">登录</div>
            <el-form :model="form" :rules="rules" ref="loginForm" label-width="0">
              <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入邮箱或用户名" size="large" />
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" type="password" placeholder="请输入密码" size="large" />
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="form.remember">记住我</el-checkbox>
                <span class="forgot-link" @click="router.push('/forgot')">忘记密码？</span>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="large" style="width:100%" @click="onLogin">登录</el-button>
              </el-form-item>
              <el-form-item>
                <!-- <div class="or-login">或使用以下方式登录</div> -->
                <!-- <div class="social-icons">
                  <el-button circle size="large" plain><i class="el-icon-platform-eleme"></i></el-button>
                  <el-button circle size="large" plain><i class="el-icon-user"></i></el-button>
                  <el-button circle size="large" plain><i class="el-icon-apple"></i></el-button>
                </div> -->
              </el-form-item>
              <el-form-item>
                <span>没有账号？<router-link to="/register">注册</router-link></span>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { apiLogin } from '@/api/api.ts'
import { ElMessage } from 'element-plus'

const router = useRouter()
const form = ref({ username: '', password: '', remember: false })
const rules = {
  username: [{ required: true, message: '请输入邮箱或用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}
const loginForm = ref()
const activeTab = ref('login')

const onLogin = () => {
  loginForm.value.validate((valid: boolean) => {
    if (valid) {
      apiLogin({ username: form.value.username, password: form.value.password })
        .then((res: any) => {
          if (res.data.code === 200) {
            ElMessage.success('登录成功！')
            localStorage.setItem('token', res.data.data)
          console.log("token:",res.data.data);
          
            router.push('/')
          } else {
            ElMessage.error(res.data.msg || '登录失败')
          }
        })
        .catch((err: any) => {
          ElMessage.error(err?.response?.data?.message || '登录失败')
        })
    }
  })
}
const onForgot = () => {
  ElMessage.info('请联系管理员重置密码')
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f8fb;
}
.login-left {
  flex: 1.2;
  background: linear-gradient(135deg, #3a8dde 60%, #1976d2 100%);
  color: #fff;
  border-radius: 32px 0 0 32px;
  min-width: 340px;
  max-width: 500px;
  padding: 48px 36px 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 32px rgba(58,141,222,0.08);
}
.brand-logo {
  display: flex;
  align-items: center;
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 36px;
  letter-spacing: 2px;
}
.brand-logo img {
  width: 48px;
  height: 48px;
  margin-right: 16px;
}
.welcome-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.welcome-desc {
  font-size: 1.1rem;
  margin-bottom: 32px;
  line-height: 1.7;
  color: #e3f0fa;
}
.features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
}
.features i {
  font-size: 1.7rem;
  margin-right: 16px;
  color: #fff;
  opacity: 0.92;
}
.feature-title {
  font-weight: bold;
  font-size: 1.13rem;
  margin-bottom: 2px;
  display: block;
}
.feature-desc {
  font-size: 1rem;
  opacity: 0.92;
}
.login-right {
  flex: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0 32px 32px 0;
  min-width: 340px;
  padding: 48px 32px;
  box-shadow: 0 4px 32px rgba(58,141,222,0.04);
  font-size: 25px;
}
.login-card {
  width: 400px;
  border-radius: 20px;
  box-shadow: none;
  border: none;
  padding: 0 0 8px 0;
  font-size: 1.18rem;
}
.el-tabs__item {
  font-size: 1.15rem;
}
.el-tabs__active-bar {
  height: 3px;
  background: #1976d2;
}
.forgot-link {
  float: right;
  color: #1976d2;
  cursor: pointer;
  font-size: 1.08rem;
  margin-left: auto;
}
.el-input__wrapper,
.el-input__inner {
  font-size: 1.15rem !important;
  border-radius: 12px !important;
}
.el-button--primary {
  border-radius: 12px;
  font-size: 1.22rem;
  height: 48px;
}
.or-login {
  width: 100%;
  text-align: center;
  color: #888;
  font-size: 1.12rem;
  margin: 16px 0 10px 0;
}
.social-icons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 8px;
}
.social-icons .el-button {
  background: #f6f8fb;
  color: #1976d2;
  border: none;
  font-size: 1.7rem;
  width: 54px;
  height: 54px;
  box-shadow: 0 2px 8px rgba(25,118,210,0.06);
  transition: background 0.2s;
}
.social-icons .el-button:hover {
  background: #e3f0fa;
}
.el-checkbox__label {
  font-size: 1.15rem !important;
}
.el-form-item, .el-form-item__label, .el-input__inner, .el-checkbox__label {
  font-size: 1.15rem !important;
}
.login-title {
  text-align: center;
  font-size: 2.1rem;
  font-weight: bold;
  margin-bottom: 18px;
  color: #1976d2;
  letter-spacing: 2px;
}
@media (max-width: 900px) {
  .login-page {
    flex-direction: column;
    padding: 0;
  }
  .login-left, .login-right {
    border-radius: 0;
    min-width: 100vw;
    max-width: 100vw;
    padding: 32px 12px;
  }
  .login-card {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 600px) {
  .login-left, .login-right {
    padding: 14px 2px;
  }
  .brand-logo {
    font-size: 1.2rem;
  }
  .welcome-title {
    font-size: 1.2rem;
  }
  .login-card {
    width: 100vw;
    min-width: 0;
  }
}
</style> 